window.addEventListener('load',function(){
    //1.获取元素
    let focus = document.querySelector('.focus')
    let ul = focus.children[0]
    //获得focus宽
    let w = focus.offsetWidth
    let ol = focus.children[1]
    
    //2.利用该定时器自动轮播图片
    let index = 0
    let times  = setInterval(function(){
               index++
               let translatex = -index *w
               ul.style.transition = 'all .3s' //过度
               ul.style.transform = 'translateX('+translatex+'px)'//3c动画
    },2000)
    //等着过度完成之后 在去判断 监听过度完成的事件 transtitionend
    ul.addEventListener('transitionend',function(){
        //无缝滚动
        if (index >= 3){
            index = 0
            //去掉过度效果
            ul.style.transition = 'none'
            //利用最新的索引继续滚动
            let translatex = -index * w
            ul.style.transform = 'translateX('+translatex+'px)'

        } else  if (index < 0){
            index = 2
             ul.style.transition = 'none'
            //利用最新的索引继续滚动
            let translatex = -index * w
            ul.style.transform = 'translateX('+translatex+'px)'

        }
        //3.小圆点跟随变化效果
        ol.querySelector('.current').classList.remove('current')
        ol.children[index].classList.add('current')
        

    })
    //4.手指滑动轮播图
    // 触摸元素 获取手指的坐标
    let stratX = 0
    let moveX = 0 //移动距离
    
    ul.addEventListener('touchstart',function(e){
        stratX = e.targetTouches[0].pageX
           clearInterval(times)

    })
    // ul.addEventListener('touchend',function(){
    //     ul.times
    // })
    //移动手指 touchmove 机算手指滑动距离 ，并且移动盒子
     let flag = false
    ul.addEventListener('touchmove',function(e){
        //机算移动距离
        moveX = e.targetTouches[0].pageX - stratX
        //移动盒子 ： 盒子原来的位置 + 手指移动的距离
        let translatex = -index * w +moveX
        //手指拖动不需要做动画效果 取消过度
          ul.style.transition = 'none'

         ul.style.transform = 'translateX('+translatex+'px)'
          flag = true //如果用户手指移动过我们才做判断
          e.preventDefault() //阻止滚动屏幕的行为
        

    })
  
    //手指离开 
     ul.addEventListener('touchend',function(e){
       //如果移动距离大于50我们播放下一张 或者上一张
      if(flag){
           if (Math.abs(moveX) > 50){
           //如果是右滑 播放上一张 moveX 是正值
           if(moveX > 0){
               index--
           }else {
                 //如果是左滑 播放下一张 moveX 是负值
               index++
           }
            let translatex = -index * w
        ul.style.transition = 'all .3s'
        ul.style.transform = 'translateX('+translatex+'px)'
         

       }else {
           // 如果小于50像素我们就回弹
            let translatex = -index * w
             ul.style.transition = 'all .1s'
             ul.style.transform = 'translateX('+translatex+'px)'
       }
      }
       //手指离开就重新开启定时器
       clearInterval(times)
    //    先清除在加定时器
       times  = setInterval(function(){
               index++
               let translatex = -index *w
               ul.style.transition = 'all .3s' //过度
               ul.style.transform = 'translateX('+translatex+'px)'//3c动画
    },2000)

      

        

    })
    //返回顶部
    let goBack = document.querySelector('.goBack')
    let nav = document.querySelector('nav')
    window.addEventListener('scroll',function(){
        if(window.pageYOffset >= nav.offsetTop){
            goBack.style.display = 'block'
        } else {
            goBack.style.display = 'none'
        }
    })
    goBack.addEventListener('click',function(){
        window.scroll(0,0)
    })
})